<template>
    <div :class="cns" :style="style"><span><slot></slot></span></div>
</template>
<script lang="ts">
import { defineComponent,computed, PropType } from 'vue'
import {ColorType} from '../../shared/config'
export default defineComponent({
    props:{
        type:{
            type:String as PropType<ColorType>
        },
        align:{
            type:String
        }
    },
    setup(props) {
        const style= computed(()=>{
            return props.type?{
                '--ph-divider-color':`var(--ph-${props.type}-color)`,
                '--ph-divider-bd':`var(--ph-${props.type})`
            }:null
        })
        const cns = computed(()=>{
            let cns= ["ph-divider"]
            if(props.align)
                cns.push("ph-divider-"+props.align)
            return cns
        })
        return {cns,style}
    }
})
</script>

<style lang="scss">
.ph-divider{
    --ph-divider-color:var(--ph-c);
    --ph-divider-bd:var(--ph-c);
	flex: 0 0 auto;
    font-size: var(--phx);
	margin: var(--ph-15) 0;
    line-height: 1.6;
    display:flex;
    align-items:center;
    position: relative;
    width: 100%;
    color:var(--ph-divider-color);
    &:before,
    &:after{
        content:"";
        flex:1;
        display:block;
        height:0;
        border-bottom:1px dotted var(--ph-divider-bd);
    }
    &-left{
        &:before{
            flex:0 0 var(--ph-30);
        }
    }
    span{
        background-color:#FFFFFF;
        padding:0 var(--ph-10);
    }
    a,button{
        border:none;
        outline:none;
        background-color: transparent!important;
        color:inherit!important;
        font-weight: bold;
        cursor: pointer;
    }
}
</style>